import React, { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import Navbar1 from '../components/navbar1';
import ShortBlogPost from '../components/short-blog-post';
import { api2, getToken } from '../api';

const AllRev = (props) => {
    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchReviews = async () => {
            try {
                const response = await api2.send('getAllReviews', { token: getToken() } );
                if (response.success) {
                    setReviews(response.data.reviews);
                }

                setLoading(false);
            } catch (err) {
                setError('Не удалось загрузить отзывы. Пожалуйста, попробуйте позже.');
                setLoading(false);
            }
        };

        fetchReviews();
    }, []);

    return (
        <div className="all-rev-container">
            <Helmet>
                <title>AllRev - Feisty Peaceful Rhinoceros</title>
                <meta
                    property="og:title"
                    content="AllRev - Feisty Peaceful Rhinoceros"
                />
            </Helmet>
            <Navbar1 rootClassName="navbar1-root-class-name2" />
            {loading && <p>Загрузка отзывов...</p>}
            {error && <p className="error-message">{error}</p>}
            {!loading && !error && (
                <div className="reviews-feed">
                    {reviews.map((review) => (
                        <ShortBlogPost
                            key={review.id}
                            review={review}
                            rootClassName="short-blog-post-root-class-name"
                        />
                    ))}
                </div>
            )}
        </div>
    );
};

export default AllRev;